<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style type="text/css">
			body{
				/* 透视度设为2500px */
				perspective: 2500px;
				/* 插入背景图，填充网页 */
				background-image: url(./img/66.webp);
				background-repeat: no-repeat;
				/* 指定背景图的大小 */
				/* background-size: cover; */
				background-size: 100% 1200px;
			}
			.wrapper{
				width: 300px;
				height: 300px;
				/* 控制水平垂直居中 */
				margin: 150px auto 0;
				/* 相对定位  以自身为参照物 */
				position: relative;
				/* 将2d空间转换3d显示 */
				transform-style: preserve-3d;
				/* 运行一次10s  运行不间断  运行速度相同 */
				animation: inifinteRotate 10s infinite linear;
			}
			.min-box,.max-box{
				position: absolute;
				top: 50%;
				left: 50%;
				/* 保证盒子水平居中 */
				transform: translate(-50%,-50%);
				transform-style: preserve-3d;
				width: 200px;
				height: 200px;
				/* 所有元素  过渡时间 */
				transition: all 2s;
			}
			.wrapper:hover .max-box{
				width: 300px;
				height: 300px;
			}
			.item{
				/* 100%  用于多个item重叠 */
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100%;
				/* 所有元素  过渡时间2s */
				transition: all 2s;
				/* 透明度为0.6 */
				opacity: 0.8;
			}
			.item1{
				background-image: url(./img/1.webp);
				/* 立体前部分 */
				transform: translateZ(100px);
				background-size: cover;
			}
			.wrapper:hover .max-box .item1{
				transform: translateZ(300px);
				/* 对图片进行放大 */
			}
			.item2{
				background-image: url(./img/2.webp);
				/* 绕Y轴旋转90度 */
				transform: rotateY(90deg) translateZ(100px);
				background-size: cover;
			}
			.wrapper:hover .max-box .item2{
				transform: rotateY(90deg) translateZ(300px);
			}
			.item3{
				background-image: url(./img/3.webp);
				/* 反方向旋转90度 */
				transform: rotateY(-90deg) translateZ(100px);
				background-size: cover;
			}
			.wrapper:hover .max-box .item3{
				transform: rotateY(-90deg) translateZ(300px);
			}
			
			.item4{
				background-image: url(./img/4.webp);
				/* 反向旋转180度 */
				transform: rotateY(180deg) translateZ(100px);
				background-size: cover;
			}
			.wrapper:hover .max-box .item4{
				transform: rotateY(180deg) translateZ(300px);
			}
			
			.item5{
				background-image: url(./img/5.webp);
				 /* 绕x轴旋转90度 */
				transform: rotateX(90deg) translateZ(100px);
				background-size: cover;
			}
			.wrapper:hover .max-box .item5{
				transform: rotateX(90deg) translateZ(300px);
			}
			
			.item6{
				background-image: url(./img/6.webp);
				transform: rotateX(-90deg) translateZ(100px);
				background-size: cover;
			}
			.wrapper:hover .max-box .item6{
				transform: rotateX(-90deg) translateZ(300px);
			}
			
			@keyframes inifinteRotate{
				0%{
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				}
				25%{
					transform: rotateX(0deg) rotateY(180deg) rotateZ(90deg);
				}
				50%{
					transform: rotateX(0deg) rotateY(360deg) rotateZ(180deg);
				}
				75%{
					transform: rotateX(180deg) rotateY(360deg) rotateZ(270deg);
				}
				100%{
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
				/* 先绕y轴旋转360度，再绕x轴旋转360度  中途伴随绕z轴旋转*/
			}
		</style>
	</head>
	<body>
		<div>
			<!-- 插入背景音乐 -->
			<video src="./music/温奕心 - 一路生花.flac" controls />
		</div>
		<div class="wrapper">
			<div class="min-box">
				<div class="item item1"></div>
				<div class="item item2"></div>
				<div class="item item3"></div>
				<div class="item item4"></div>
				<div class="item item5"></div>
				<div class="item item6"></div>
			</div>
			<div class="max-box">
				<div class="item item1"></div>
				<div class="item item2"></div>
				<div class="item item3"></div>
				<div class="item item4"></div>
				<div class="item item5"></div>
				<div class="item item6"></div>
			</div>
		</div>
	</body>
</html>
